import React from 'react'
import Mock from 'mockjs'
import { Toast, NavBar } from 'react-vant'
import { SettingO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
const username = localStorage.getItem('username')

// mock 帖子数据
const mockPosts = Mock.mock({
    'posts|7': [{
        'id|+1': 1,
        'title': '@ctitle(5, 10)',
        'image': '@image("200x200", "#50B347", "#FFF", "Product")',
        'user': username,
        'likes': '123K',
    }]
}).posts

export default function My() {
    const router = useNavigate()

    return (
        <div className="container">
            <div className="profile-header">
                <div className="flex-between mb-4">
                    <div className="flex-center">
                        <div className="avatar">
                            <img 
                                src="https://img.icons8.com/ios-filled/100/000000/user-male-circle.png" 
                                alt="avatar" 
                                className="avatar-image"
                            />
                        </div>
                        <div className="stats">
                            <div className="stat-item">
                                <div className="stat-value">2</div>
                                <div className="stat-label">帖子</div>
                            </div>
                            <div className="stat-item">
                                <div className="stat-value">34</div>
                                <div className="stat-label">粉丝</div>
                            </div>
                            <div className="stat-item">
                                <div className="stat-value">55</div>
                                <div className="stat-label">喜欢</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="profile-info">
                    <h1 className="profile-name">{username}</h1>
                    <p className="profile-bio">
                        写一份介绍让人们发现你 
                        <span className="edit-icon">✏️</span>
                    </p>
                </div>
            </div>
        </div>
    );
}
